<template>
  <div style="width:100%;height:100%;">
    <transition :name="transitionName">
      <keep-alive :include="cachedViews">
        <router-view :key="key" class="Router" />
      </keep-alive>
    </transition>
    <Load v-show="$store.state.user.LOADING" />
  </div>
</template>

<script >
export default {
  components: {
    // Load:Load v-show="$store.state.user.LOADING"
    Load: () => import('./Load')
  },
  data() {
    return {
      transitionName: ''
    }
  },
  computed: {
    cachedViews() {
      return this.$store.state.user.cachedViews
    },
    key() {
      return this.$route.path
    },
    userRole() {
      return this.$store.state.distanceInfo.userRole
    }
  },
  watch: {
    $route(to, from) {
      // 切换动画
      const isBack = this.$router.isBack // 监听路由变化时的状态为前进还是后退
      if (isBack) {
        this.transitionName = 'slide-left'
      } else {
        this.transitionName = 'slide-right'
      }
      this.$router.isBack = false
    }
  },
  mounted() {

  }

}
</script>
<style lang="scss" scoped>
 .container {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    width: 100%;
    height: 100%;
    max-width: 15rem;
    margin: auto;
    position: relative;

    .Router {
      position: relative;
      height: 100%;
      transition: all .33s ease;
      will-change: transform;
      top: 0;
      backface-visibility: hidden;
      perspective: 1000;
    }
    .slide-left-enter,
    .slide-right-leave-active {
      opacity: 0;
      transform: translate3d(-100%, 0, 0);
    }

    .slide-left-leave-active,
    .slide-right-enter {
      opacity: 1;
      transform: translate3d(100%, 0 ,0);
    }
  }

</style>
